<template>
  <Modal v-model="showAddFriendModal" title="添加好友" width="360" @on-visible-change="modalChange">
    <Input v-model="friendUsername" @on-search="searchFri" search enter-button placeholder="请输入用户账号..." />
    <div class="searchResult">
      <div class="hasResult" v-if="hasResult">
        <div class="result-left">
          <img :src="imgBaseUrl+currentSearchFriend.img" alt="">
        </div>
        <div class="result-right">
          <h2 class="nickname">{{currentSearchFriend.nickname}}</h2>
          <p class="username">账号：{{currentSearchFriend.username}}</p>
        </div>
      </div>
      <div class="noResult" v-if="noResult">
        输入对方账号以查找
      </div>
      <div class="loading" v-if="isSearching">
        <Spin size="large" fix></Spin>
      </div>
    </div>
    <div slot="footer">
      <Button size="large" long @click="addToContacts" :loading="btnLoading">添加到通讯录</Button>
    </div>
  </Modal>
</template>

<script>
import {mapState} from 'vuex'
import {reqSearchFris, reqAddToContacts} from '@/api/index.js'

export default {
  data () {
    return {
      friendUsername: '',
      hasResult: false, // 搜索好友是否成功
      noResult: true, // 没有搜索结果状态
      isSearching: false, // 是否处于搜索状态
      currentSearchFriend: {}, // 当前搜索到的好友信息
      btnLoading: false // 添加到通讯录按钮loading状态
    }
  },
  props: {
    propsToSon: Boolean // 接受从父组件传递的值
  },
  computed: {
    ...mapState(['userInfo', 'imgBaseUrl']),
    showAddFriendModal: { // 本组件的modol基于这个属性显示/隐藏
      get () { // 基于propsToSon的值
        return this.propsToSon
      },
      set (value) { // 当modal关闭时自动调用此方法，完成向父组件传值
        this.$emit('propsToFather', value)
      }
    }
  },
  methods: {
    async searchFri () {
      /*
        页面三种状态：
          1：初始状态, hasResult=false, noResult=true, isSearching=false
          2: 搜索状态, hasResult=false, noResult=false, isSearching=true
          3: 成功状态, hasResult=true, noResult=false, isSearching=false
          4: 失败状态, 同初始状态
      */
      // if (this.timer) { // 防止keyup和点击事件都触发
      //   clearTimeout(this.timer)
      // }
      if (!this.friendUsername) {
        // 设置页面状态4
        this.hasResult = false
        this.isSearching = false
        this.noResult = true
        // 提示错误
        this.$Message.error('请输入用户名')
        // 将currentSearchFriend重置为空对象
        this.currentSearchFriend = {}
        return false
      } else {
        // 设置页面状态2
        this.hasResult = false
        this.noResult = false
        this.isSearching = true
        // 发送请求
        const friendUsername = this.friendUsername
        const result = await reqSearchFris(friendUsername)
        if (result.success) {
          this.currentSearchFriend = result.data
          // 设置页面状态3
          this.noResult = false
          this.hasResult = true
          this.isSearching = false
        } else {
          // 设置页面状态4
          this.hasResult = false
          this.isSearching = false
          this.noResult = true
          // 提示错误
          this.$Message.error(result.info)
          // 将currentSearchFriend重置为空对象
          this.currentSearchFriend = {}
        }
      }
    },
    // searchFriWithThrottle () {
    //   // 函数节流，防止keyup频繁触发
    //   if (this.timer) {
    //     clearTimeout(this.timer)
    //   }
    //   this.timer = setTimeout(() => {
    //     this.searchFri()
    //   }, 1000)
    // },
    async addToContacts () {
      if (!this.friendUsername || !this.currentSearchFriend.id) { // 未输入用户名，或用户名不正确都无法发送请求
        this.$Message.error('请输入正确用户名')
        return false
      } else {
        this.btnLoading = true
        // 发送请求
        const userId = this.userInfo.id
        const friendUsername = this.friendUsername
        const result = await reqAddToContacts({userId, friendUsername})
        if (result.success) {
          this.btnLoading = false
          this.$Message.success('好友请求已发送')
          this.showAddFriendModal = false
        } else {
          this.btnLoading = false
          this.$Message.error(result.info)
        }
      }
    },
    modalChange () {
      // 显示 -> 隐藏，初始化状态
      this.friendUsername = ''
      this.hasResult = false
      this.isSearching = false
      this.noResult = true
      // 将currentSearchFriend重置为空对象
      this.currentSearchFriend = {}
      return true
    }
  }
}
</script>

<style lang="stylus">
// 弹出Modal的样式
.ivu-modal-content
  .ivu-modal-body
    .searchResult
      padding 20px 0
      height 100px
      margin-bottom -15px
      .hasResult
        display flex
        height 100%
        .result-left
          flex 0 0 60px
          margin-right 15px
          img
            width 100%
            height 100%
        .result-right
          flex 1
          display flex
          flex-direction column
          justify-content space-between
          .nickname
            font-size 24px
      .noResult
        width 100%
        height 100%
        text-align center
        line-height 60px
      .loading
        width 100%
        height 100%
        position relative
    .ivu-input-wrapper
      .ivu-input
        border-color #e4e4e4
        box-shadow none
      .ivu-input-search
        box-shadow none
        background #1aad19!important
        border-color #1aad19!important
        &:active
          background green!important
          border-color green!important
  .ivu-modal-footer
    .ivu-btn
      box-shadow none
      background-color #1aad19
      border-color #1aad19
      color #fff
      &:active
        background-color green
        border-color green
</style>
